//@ts-nocheck
import React, { useEffect, useState } from 'react'
import { Toast } from 'antd-mobile'
// import moment from '@common/js/moment'
// import { axios } from 'axios'
import CommentList from '../CommentList'
import InputCommentImage from '../../images/comment-images.png'
import CommentImage from '../../images/comment-image.png'
import './index.less'

const Comment = ({ currentId, onUserComment, isPreview, isReivew, userCommnetList }) => {
  const [showCommon, setShowCommon] = useState(false)
  const [showCommentBottomImage, setShowCommentBottomImage] = useState(true)
  const [content, setContent] = useState('')
  const [commentList, setCommentList] = useState(userCommnetList)
  const [userInfo, setUserInfo] = useState({
    userWxAvatar: '',
    name: ''
  })

  const onChange = (e) => {
    const text = e.target.value
    setContent(text)
  }

  const sendComment = () => {
    if(content.trim() === '') {
      return
    }
    setShowCommon(false)
    setShowCommentBottomImage(true)
    const item = {
      ...userInfo,
      currentId,
      content,
      date: '',
      showDate: '',
      userActionType: 3,
      questionAnswer: content
    }
    const copyList = [].concat(commentList)
    copyList.unshift(item)
    const result = copyList.map((i, index) => {
      return {
        ...i,
        showDate: i.date
      }
    })
    setCommentList(result)
    onUserComment(item)
    setContent('')
  }

  // useEffect(() => {
  //   axios.post('/h5-userc/traditionalpaper/getusercbaseinfovo.json').then((response) => {
  //     const { userWxAvatar, name } = response.data
  //     setUserInfo({
  //       userWxAvatar,
  //       name
  //     })
  //   })
  // }, [])

  const showCommentInput = () => {
    if (isPreview || isReivew) {
      return
    }
    setShowCommon(true)
    setShowCommentBottomImage(false)
  }

  const onCloseWrapper = (e) => {
    if (e.target.className === 'douyin-comment-wrapper') {
      setShowCommon(false)
      setShowCommentBottomImage(true)
    }
  }

  const onBlur = () => {
    sendComment()
    window.scroll(0, 0)
  }

  return (
    <div>
      {isReivew ? (
        <div className="douyin-comment-comp">
          {commentList?.map((data, index) => {
              return <CommentList data={data} key={index} />
            })}
        </div>
      ) : (
        <div className="douyin-comment-comp">
          {commentList
            .filter((i) => i.currentId === currentId)
            .map((data, index) => {
              return <CommentList data={data} key={index} />
            })}
        </div>
      )}
      {commentList?.length === 0 && <p className="comment-list-no-data">平等表达，友善交流</p>}
      {showCommon && (
        <div className="douyin-comment-wrapper" onClick={onCloseWrapper}>
          <div className="douyin-commen-content">
            <div className="douyin-comment">
              <textarea
                placeholder="善语结善缘，恶言伤人心～"
                className="textarea-com"
                onChange={onChange}
                rows={2}
                autoFocus
                onBlur={onBlur}
              />
              <img src={InputCommentImage} alt="" />
            </div>
            {content !== '' && (
              <div className="douyin-comment-btn" onClick={sendComment}>
                发送
              </div>
            )}
          </div>
        </div>
      )}
      {showCommentBottomImage && (
        <div className="douyin-comment-image" onClick={showCommentInput}>
          <img width="100%" src={CommentImage} alt="" />
        </div>
      )}
    </div>
  )
}

export default Comment
